<template>
    <view style="padding: 30rpx;">
        <button @click="onSetTimeCall()">单词定时器setTimeout</button>
        <button @click="onSetTimeCallxy(userName,password)">带参数setTimeout</button>
        <button @click="onTimeoutClear()" type="warn">取消定时器</button>
        <button @click="onInteral()" type="primary">周期打印</button>
        <button @click="onClearInter()" type="warn" plain="true">取消周期打印</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userName:'cxy',
                password:'123',
                timeoutID:null,
                count:0,
                interalID:null
            }
        },
        methods: {
            onSetTimeCall(){
                console.log("onSetTimeCall-->");
                //setTimeout(callback,ms,ayn[])
                setTimeout(()=>{
                    console.log("我延时3秒才会打印");
                },3000)
            },
            onSetTimeCallxy(name,pwd){
                console.log("onSetTimeCallxy-->name:"+name+",pwd:"+pwd);
                //console.log("onSetTimeCallxy-->name:"+this.userName+",pwd:"+this.password);
            },
            onTimeoutClear(){
                console.log("onTimeoutClear----->定时器被我取消了"+this.timeoutID);
                clearTimeout(this.timeoutID);
            },
            onInteral(){
                this.interalID = setInterval(()=>{
                    this.count++;
                    console.log("周期打印 count:",this.count);
                },1000)
            },
            onClearInter(){
                console.log("onClearInter:",this.interalID);
                clearInterval(this.interalID)
            }
        }
    }
</script>

<style>
button{
    margin: 30rpx;
}
</style>